<template>
  <div id="photoPage">
    <TopBar :searchOrNot="false"></TopBar>
    <div id="searchBar">
      <span id="search"></span>
      <input type="text" placeholder="搜 索 相 册" v-model="searchContent">
    </div>
    <div id="content">
      <div class="albumItem" v-for="item in albumData" :key="item.id" @click="toAlbumPhoto(item)">
        <div class="imgBox">
          <img :src="GLOBAL.OSSImageUrlRoot + 'headerAlbum/' + item.id + '.png'" :alt="item.name"
            @error="defaultImg()">
        </div>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <NotMore></NotMore>
    <FilingBar></FilingBar>
  </div>
</template>

<script>
import FilingBar from '@/components/reusable/FilingBar.vue';
import NotMore from '@/components/reusable/NotMore.vue';
import TopBar from '@/components/reusable/TopBar.vue'
export default {
  components: {
    TopBar , NotMore , FilingBar
  },
  data() {
    return {
      searchContent: '', // 搜索框内容
      albumData: [], // 相册数据
    }
  },
  methods: {
    // 获取所有相册
    getAllAlbum() {
      this.$axios({
        method: 'post',
        url: '/album/getAllAlbum'
      }).then(res => {
        this.albumData = res.data
        console.log(this.albumData);
      })
    },
    // 返回默认的图片
    defaultImg() {
      if (event.type == 'error') {
        event.target.src = 'https://bokey.oss-cn-shenzhen.aliyuncs.com/img/staticImage/notPicture.png'
      }
    },
    // 跳转到相册图片
    toAlbumPhoto(item) {
      this.$router.push({
        path: '/photoMore',
        query: {
          name: item.name,
          id: item.id
        }
      })
    },
    // 搜索事件
    search(searchContent) {
      this.$axios({
        method: 'post',
        url: '/album/searchAlbum',
        data: {
          'searchContent' : searchContent
        },
        headers: {
          'Content-Type' : 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        this.albumData = res.data
      })
    },
  },
  mounted() {
    this.getAllAlbum()
  },
  // 监听用户是否按下回车键
  created() {
    let that = this
    document.onkeydown = (e) => {
      e = window.event || e
      if (e.code == 'Enter' || e.code == 'enter') {
        that.search(this.searchContent)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#searchBar {
  height: 60px;
  width: 400px;
  margin: 0 auto;
  border: 1px solid rgba(155, 155, 155, .3);
  border-radius: 20px;
  position: relative;
}

#search {
  display: inline-block;
  vertical-align: top;
  height: 40px;
  margin: 10px;
  font-size: 40px;
  // 文字不可选中
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

input[type='text'] {
  margin-top: 5px;
  height: 90%;
  background-color: rgba(0, 0, 0, 0);
  outline: none;
  border: none;
  width: 80%;
  color: $color-main-text;
  font-size: $font-size-medium;
}

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.albumItem {
  width: 80%;
  margin: 20px auto;
  background-color: $color-list;
  color: $color-main-text;
  transition: all .5s;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 8px;
}

.imgBox {
  width: 80%;
  height: 70%;
  margin: 20px auto;
  display: block;
  overflow: hidden;
  border-radius: 20px;
}

.albumItem img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all .5s;
}

.albumItem:hover img {
  transform: scale(1.2);
}

.albumItem p {
  font-size: $font-size-medium;
  text-align: center;
  font-weight: $font-weight-medium;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  // 设置文本行数为1行，内容超出显示省略号
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}</style>